<template>
  <div class="footer-panel-container">
    <div class="tools-container">
      <div class="copy-container">
        <div @click="handleCopy">Copy</div>
      </div>
      <transition name="fade">
        <span class="copy-status" v-show="copyStatus" transiton="fade">Copy succeeded !!!</span>
      </transition>
      <div class="box" @click="$store.dispatch('footer', false)">
        <svg-icon icon-class="close" class="icon" />
      </div>
    </div>
    <ol>
      <li>
        <div class="label is-copy" @click="handleCopyInfo(current.url)">URL</div>
        <p class="value">{{ current.url }}</p>
      </li>
      <li>
        <div class="label">Status</div>
        <p class="value">{{ current.status }}</p>
      </li>
      <li>
        <div class="label">Method</div>
        <p class="value">{{ current.method }}</p>
      </li>
      <li>
        <div class="label">Type</div>
        <p class="value">{{ current.type }}</p>
      </li>
      <li>
        <div class="label is-copy" @click="handleCopyInfo(current.queryString)">QueryString</div>
        <p class="value">{{ current.queryString | fmtQs }}</p>
      </li>
      <li>
        <div class="label is-copy" @click="handleCopyInfo(current.content)">Content</div>
        <p class="value">{{ current.content }}</p>
      </li>
      <li>
        <div class="label is-copy" @click="handleCopyHeaders(current.requestHeaders)">RequestHeaders</div>
        <p class="value">
          <ul>
            <li v-for="(header, key) in current.requestHeaders" :key="key">{{ header.name }}: {{header.value}}</li>
          </ul>
        </p>
      </li>
      <li>
        <div class="label is-copy" @click="handleCopyHeaders(current.responseHeaders)">ResponseHeaders</div>
        <p class="value">
          <ul>
            <li v-for="(header, key) in current.responseHeaders" :key="key">{{ header.name }}: {{header.value}}</li>
          </ul>
        </p>
      </li>
    </ol>
    <div style="height: 50px; width: 100%"></div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { copyValue, sleep } from "@alrale/common-lib";
import { fmtJSON, headersToObject } from "@/common";

export default {
  filters: {
    fmtQs(val) {
      if (!val || val.length === 0) return null;
      return val;
    },
  },
  data() {
    return {
      copyStatus: false,
    };
  },
  computed: {
    ...mapGetters(["current"]),
  },
  methods: {
    showSuccess() {
      this.copyStatus = true;
      sleep(1500, () => (this.copyStatus = false));
    },
    // 单复制-headers
    handleCopyHeaders(headers) {
      this.showSuccess();
      const headersObj = headersToObject(headers);
      copyValue(JSON.stringify(headersObj));
    },
    // 单复制
    handleCopyInfo(target) {
      this.showSuccess();
      const targetJSON = fmtJSON(target)
      copyValue(JSON.stringify(targetJSON));
    },
    handleCopy() {
      this.showSuccess();
      const { content, requestHeaders, responseHeaders, ...target } =
        this.$store.state.current || {};
      const contentJSON = fmtJSON(content);
      const reqHeaders = headersToObject(requestHeaders);
      const resHeaders = headersToObject(responseHeaders);
      copyValue(
        JSON.stringify({
          ...target,
          content: contentJSON,
          requestHeaders: reqHeaders,
          responseHeaders: resHeaders,
        })
      );
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/index.scss";
.footer-panel-container {
  position: relative;
  @include set_w_h;
  .tools-container {
    position: fixed;
    @include set_w_h(100%, 30px);
    @include flex_between_center;
    .copy-container {
      @include set_w_h(100px, 30px);
      @include flex_center;
      & > div {
        cursor: pointer;
        font-size: 14px;
        background-color: rgba(128, 128, 128, 0.5);
        border-radius: 3px;
        @include set_w_h(60px, 20px);
        @include flex_center;
        &:hover {
          background-color: rgba(128, 128, 128, 0.7);
        }
        &:active {
          background-color: rgba(128, 128, 128, 1);
        }
      }
    }
    .box {
      cursor: pointer;
      @include set_w_h(40px);
      @include flex_center;
      .icon {
        font-size: 20px;
        color: $FontFFFColor;
      }
    }
  }
  ul {
    padding: 0;
    li {
      list-style: none;
      line-height: 20px;
    }
  }
  ol {
    margin-top: 30px;
  }
  box-shadow: 0 -2px 10px rgb(0 0 0 / 10%);
  border-top: 1px solid #eee;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: rgb(53, 59, 70);
  color: $FontFFFColor;
  font-size: 13px;
  .label {
    font-size: 14px;
    font-weight: 600;
  }
  .is-copy {
    cursor: pointer;
    &:hover {
      color: rgb(77, 204, 147);
    }
    &:active {
      color: rgba(59, 167, 118, 1);
    }
  }
  .copy-status {
    font-size: 14px;
    color: rgb(77, 204, 147);
  }
}
</style>
